<template>
  <div class='dashBoard-container'>
    <a-row :gutter="30">
      <a-col :span="8">
        <div class='whiteBg'>
          <div class='top-box'>
            <p>产品数量</p>
            <div class="fx_end">
              <span class='num'>{{list.productCount}}</span>
              <img src="~@/assets/images/img/icon_13.png" alt="" style='width:50px;height:50px;' />
            </div>
          </div>
          <div class='bottom-box'>
            <a-row :gutter="75">
              <a-col :span="12">
                <div class='fx_end'>
                  <div><span class='circular green'></span>正常</div>
                  <div>{{list.productEnableCount}}</div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class='fx_end'>
                  <div><span class='circular red'></span>禁用</div>
                  <div>{{list.productDisableCount}}</div>
                </div>
              </a-col>
            </a-row>

          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class='whiteBg'>
          <div class='top-box'>
            <p>设备数量</p>
            <div class="fx_end">
              <span class='num'>{{list.deviceCount}}</span>
              <img src="~@/assets/images/img/icon_27.png" alt="" style='width:50px;height:50px;' />
            </div>
          </div>
          <div class='bottom-box'>
            <a-row :gutter="75">
              <a-col :span="12">
                <div class='fx_end'>
                  <div><span class='circular green'></span>正常</div>
                  <div>{{list.deviceOnlineCount}}</div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class='fx_end'>
                  <div><span class='circular red'></span>离线</div>
                  <div>{{list.deviceOfflineCount}}</div>
                </div>
              </a-col>
            </a-row>

          </div>
        </div>
      </a-col>

      <a-col :span="8">
        <div class='whiteBg'>
          <div class='top-box'>
            <p>今日设备消息量</p>
            <div class="fx_end">
              <span class='num'>{{list.todayDeviceDataCount}}</span>
              <img src="~@/assets/images/img/icon_27.png" alt="" style='width:50px;height:50px;' />
            </div>
          </div>
          <div class='bottom-box'>
            <div class='fx_end' style='font-size:12px;'>
              <div>当月设备消息量</div>
              <div>{{list.monthDeviceDataCount}}</div>
            </div>
          </div>
        </div>
      </a-col>

    </a-row>
    <a-row style='margin-top:16px'>
      <a-col :span="24">
        <div class='whiteBg'>
          <div style="padding:20px 12px">
            <div class="fx_end" style='margin-bottom:40px;'>
              <div><span class='square'></span>设备消息</div>
              <div>
                <a-radio-group v-model:value="barType" @change="statisticst" style='margin-right:20px'>
                  <a-radio-button value="1">最近1小时</a-radio-button>
                  <a-radio-button value="2">最近24小时</a-radio-button>
                  <a-radio-button value="3">近一周</a-radio-button>
                </a-radio-group>
                <a-range-picker v-model:value="searchParams.rangeDate" format="YYYY-MM-DD HH:mm:ss"
                  :showTime="{ hideDisabledOptions: false }" @change="handleChangeSearchDate" />
              </div>
            </div>
            <SingleLine v-if='list.barDataSource.length' :chartData="list.barDataSource" height="500px"
              :option="singleLineOption">
            </SingleLine>
            <a-empty v-else />
          </div>

        </div>

      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onBeforeUnmount, unref } from 'vue';
  import SingleLine from '/@/components/chart/SingleLine.vue';
  import { getDeviceInfo, getOriginDataInfo } from './DashBoard.ts';

  const loading = ref(true);
  const barType = ref('3');
  const update = ref()

  const listQuery = {
    endDateTime: '',
    selectType: '3',
    startDateTime: ''
  };
  const singleLineOption = {
    grid: { left: '5%', right: '5%' },
    lineStyle: {
      color: '#BAC9F0',
    },
    areaStyle: {
      borderColor: '#000000', // 设置边界线颜色
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#BAC9F0'  // 100% 处的颜色
        }, {
          offset: 1, color: 'rgba(186,201,240,0.3)' //   0% 处的颜色
        }],
        global: false // 缺省为 false
      },
    },

  };
  // 查询区域存储值
  const searchParams = reactive({
    rangeDate: [],
  });
  let list = reactive({
    deviceCount: 0,
    deviceOfflineCount: 0,
    deviceOnlineCount: 0,
    monthDeviceDataCount: 0,
    productCount: 0,
    productDisableCount: 0,
    productEnableCount: 0,
    todayDeviceDataCount: 0,
    barDataSource: []
  });
  // 选择统计类别
  function statisticst(e) {
    barType.value = e.target.value
    listQuery.selectType = e.target.value.toString()
    listQuery.startDateTime = ''
    listQuery.endDateTime = ''
    searchParams.rangeDate = []
    originDataInfo()
  }
  function handleChangeSearchDate(_value, dateStringArray) {
    // searchParams.rangeDate = dateStringArray
    console.log(dateStringArray)
    listQuery.selectType = '4'
    barType.value = '4'
    listQuery.startDateTime = dateStringArray[0]
    listQuery.endDateTime = dateStringArray[1]
    originDataInfo()
  }

  function deviceInfo() {
    getDeviceInfo(null).then((res) => {
      if (res.success) {
        list.deviceCount = res.result.deviceCount
        list.deviceOfflineCount = res.result.deviceOfflineCount
        list.deviceOnlineCount = res.result.deviceOnlineCount
        list.monthDeviceDataCount = res.result.monthDeviceDataCount
        list.productCount = res.result.productCount
        list.productDisableCount = res.result.productDisableCount
        list.productEnableCount = res.result.productEnableCount
        list.todayDeviceDataCount = res.result.todayDeviceDataCount
      }
    });
  }
  function originDataInfo() {
    let barData = []
    getOriginDataInfo(listQuery).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticCount;
            barData.push(obj);
          }
          list.barDataSource = barData
        } else {
          list.barDataSource = []
        }
      }
    });
  }

  deviceInfo();
  originDataInfo();
</script>
<style lang="less" scoped>
  .fx {
    display: flex;
    padding: 0;
  }

  .fx_end {
    display: flex;
    justify-content: space-between;
  }

  .fx-center {
    justify-content: center;
    align-items: center;
  }

  p {
    margin: 0;
    padding: 0
  }

  a {
    font-size: 14px;
    color: #243AA6;
  }

  .dashBoard-container {
    padding: 18px;

    .whiteBg {
      background: #fff;
    }

    .square {
      width: 8px;
      height: 8px;
      background: #243AA6;
      display: inline-block;
      margin-right: 14px;
    }

    .top-box {
      padding: 16px 16px 0 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      p {
        font-size: 12px;
        color: #615851;
      }

      .num {
        font-weight: 600;
        font-size: 24px;
        color: #272624;
      }
    }

    .bottom-box {
      padding: 14px 18px 18px;
      font-size: 10px;
      color: #333333;

      .circular {
        width: 4px;
        height: 4px;
        margin-right: 10px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -3px;
      }

      .green {
        background: rgba(0, 193, 89, 0.8);
        border: 1px solid #00C159;
      }

      .red {
        background: rgba(255, 0, 0, 0.6);
        border: 1px solid #FF0000;
      }
    }


  }
</style>
